<template>
  <div class="card" :data="data">
    <div class="count" style="float: left;">
      <div class="title">
        <img src="./image/count-icon.png" alt="" class="icon">
        <div>案件总数</div>
      </div>
      <p>
        <countTo :startVal="0" :endVal="item.totalCases || 0" :duration='5000'></countTo>
        件
      </p>
      <img src="./image/deliver.png">
    </div>
    <div class="count" style="float: right;">
      <div class="title">
        <img src="./image/count-icon.png" alt="" class="icon">
        <div>受害人数</div>
      </div>
      <p>
        <countTo :startVal="0" :endVal="item.largeScreenOfVictims || 0" :duration='5000'></countTo>
        人
      </p>
      <img src="./image/deliver.png">
    </div>


    <div class="amount" style="float: left;">
      <div>涉案金额</div>
      <p>
        <countTo :startVal="0" :endVal="setAmount(item.totalAmountInvolved || 0)" :duration='5000'></countTo>
        {{setAmountText(item.totalAmountInvolved)}}元
      </p>
    </div>
    <div class="amount" style="float: right;">
      <div>损失金额</div>
      <p>
        <countTo :startVal="0" :endVal="setAmount(item.amountOfDamageslargeScreen || 0)" :duration='5000'></countTo>
        {{setAmountText(item.amountOfDamageslargeScreen)}}元
      </p>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to';
  export default{
    components: {
      countTo
    },
    name: 'census-card',
    props: {
      data: {
        type: Object,
        default: () => {
          return {
            totalCases: 0,
            largeScreenOfVictims: 0,
            amountOfDamageslargeScreen: 0,
            totalAmountInvolved: 0,
          }
        }
      }
    },
    data() {
      return {
        item: {
          totalCases: 0,
          largeScreenOfVictims: 0,
          amountOfDamageslargeScreen: 0,
          totalAmountInvolved: 0,
        }
      }
    },
    watch: {
      data: function(res) {
        if (res) {
          this.item = res
        } else {
          this.item = {
            totalCases: 0,
            largeScreenOfVictims: 0,
            amountOfDamageslargeScreen: 0,
            totalAmountInvolved: 0,
          }
        }
      }
    },
    methods: {
      setAmount(num = 0) {
        let amount = 0
        if (num > 100000000) {
          let result = (num / 100000000).toString()
          amount = result.indexOf('.') === -1 ? result : Number(result).toFixed(2)
        } else if (num > 100000) {
          let result = (num / 10000).toString()
          amount = result.indexOf('.') === -1 ? result : Number(result).toFixed(2)
        } else {
          amount = num
        }
        return amount
      },
      setAmountText(num = 0) {
        let text = ''
        if (num > 100000000) {
          text = '亿'
        } else if (num > 100000) {
          text = '万'
        }
        return text
      }
    }
  }
</script>

<style lang="less" scoped>
  .card {
    width: 100%;
    height: 266px;
    color: #fff;

    .count {
      width: 44.545%;

      .title {
        display: flex;
        align-items: flex-end;
        margin-bottom: 3.05555vh;

        >img {
          margin-bottom: 3px;
        }

        >div {
          width: 88.265%;
          height: 3.7vh;
          background-image: url(image/count-wrap.png);
          background-size: 100% 100%;
          margin-left: 1.0185vh;
          text-align: center;
          line-height: 3.7vh;
          font-size: 1.666vh;
        }
      }

      >p {
        text-align: center;
        margin-bottom: 0;
        color: #fff;
        margin-left: 10px;
        font-size: 1.6666vh;
        span {
          color: #00cbff;
          font-size: 2.777vh;
        }
      }

      >img {
        margin-bottom: 2.3148vh;
      }
    }

    .amount {
      width: 44.545%;
      height: 10.27777vh;
      background-image: url(image/amount-wrap.png);
      background-size: 100% 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding-left: 14px;
      padding-right: 14px;

      >p {
        text-align: center;
        color: #fff;
        margin-bottom: 0;
        font-size: 1.296vh;
        span {
          color: #00cbff;
          margin-left: 10px;
          font-size: 2.222vh;
        }
      }

      >div {
        color: #fff;
        font-size: 1.574vh;
      }
    }
  }
</style>
